<template>
    <view class="login-container">
        <!-- 背景图 -->
        <image class="bg-image" src="/static/images/icon4.png" mode="aspectFill"></image>
        <view class="overlay"></view>
        
        <view class="header">
            <image class="logo" src="/static/images/icon4.png" mode="aspectFill"></image>
            <text class="welcome">欢迎回来</text>
        </view>
        
        <view class="login-form">
            <view class="form-item" :class="{ 'active': focusField === 'username' }">
                <text class="icon iconfont icon-user"></text>
                <input 
                    type="text" 
                    v-model.trim="form.username" 
                    placeholder="请输入用户名" 
                    @focus="handleFocus('username')"
                    @blur="validateField('username')"
                />
            </view>
            <text class="error-tip" v-if="errors.username">{{ errors.username }}</text>
            
            <view class="form-item" :class="{ 'active': focusField === 'password' }">
                <text class="icon iconfont icon-lock"></text>
                <input 
                    :type="showPassword ? 'text' : 'password'" 
                    v-model="form.password" 
                    placeholder="请输入密码"
                    @focus="handleFocus('password')"
                    @blur="validateField('password')"
                />
                <text class="icon-btn" @tap="togglePassword">
                    <text class="iconfont" :class="showPassword ? 'icon-eye' : 'icon-eye-close'"></text>
                </text>
            </view>
            <text class="error-tip" v-if="errors.password">{{ errors.password }}</text>

            <button 
                class="login-btn" 
                @tap="handleLogin"
                :disabled="isLoading || !form.username || !form.password"
                :loading="isLoading"
            >
                <text class="btn-text">{{ isLoading ? '登录中...' : '登录' }}</text>
            </button>

            <view class="actions">
                <text class="action-link" @tap="goToForgotPassword">忘记密码？</text>
                <text class="action-link highlight" @click="goToRegister">注册账号</text>
            </view>
        </view>
    </view>
</template>

<script>
import API from '@/api/config.js'

export default {
    data() {
        return {
            form: {
                username: '',
                password: ''
            },
            errors: {
                username: '',
                password: ''
            },
            isLoading: false,
            showPassword: false,
            focusField: '',
        }
    },
    methods: {
        handleFocus(field) {
            this.focusField = field
        },
        
        handleBlur(field) {
            this.focusField = ''
        },
        
        togglePassword() {
            this.showPassword = !this.showPassword
        },
        
        validateField(field) {
            this.focusField = ''
            this.errors[field] = ''
            
            switch(field) {
                case 'username':
                    if (!this.form.username) {
                        this.errors.username = '请输入用户名'
                    } else if (this.form.username.length < 3) {
                        this.errors.username = '用户名至少3个字符'
                    }
                    break
                    
                case 'password':
                    if (!this.form.password) {
                        this.errors.password = '请输入密码'
                    } else if (this.form.password.length < 6) {
                        this.errors.password = '密码至少6个字符'
                    }
                    break
            }
            
            return !this.errors[field]
        },
        
        validateForm() {
            const usernameValid = this.validateField('username')
            const passwordValid = this.validateField('password')
            return usernameValid && passwordValid
        },
        
        async handleLogin() {
            if (this.isLoading) return
            
            if (!this.validateForm()) return
            
            this.isLoading = true
            
            try {
                const res = await uni.request({
                    url: API.LOGIN,
                    method: 'POST',
                    data: {
                        account: this.form.username,
                        password: this.form.password
                    },
                    header: {
                        'Content-Type': 'application/json'
                    }
                })
                
                console.log('完整登录响应:', res)
                const { code, message, data } = res.data
                
                if (code === 200 && data) {
                    // 直接存储服务器返回的 token，不添加 Bearer 前缀
                    uni.setStorageSync('token', data)
                    console.log('存储的token:', data)
                    
                    uni.showToast({
                        title: message || '登录成功',
                        icon: 'success',
                        duration: 1500
                    })
                    
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/my/my'
                        })
                    }, 1500)
                } else {
                    uni.showToast({
                        title: message || '登录失败',
                        icon: 'none',
                        duration: 2000
                    })
                }
            } catch (error) {
                console.error('登录失败:', error)
                uni.showToast({
                    title: '网络错误，请稍后重试',
                    icon: 'none',
                    duration: 2000
                })
            } finally {
                this.isLoading = false
            }
        },

        goToRegister() {
            uni.navigateTo({
                url: '/pages/register/register'
            })
        },
        
        goToForgotPassword() {
            try {
                uni.navigateTo({
                    url: '/pages/forgot-password/forgot-password',
                    animationType: 'slide-in-right',
                    success: () => {
                        // 清空表单
                        this.form.username = ''
                        this.form.password = ''
                        this.errors.username = ''
                        this.errors.password = ''
                        this.focusField = ''
                    },
                    fail: (err) => {
                        console.error('跳转失败:', err)
                        uni.showToast({
                            title: '页面跳转失败',
                            icon: 'none'
                        })
                    }
                })
            } catch (error) {
                console.error('跳转错误:', error)
                uni.showToast({
                    title: '系统错误',
                    icon: 'none'
                })
            }
        }
    }
}
</script>

<style scoped>
.login-container {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 40rpx;
}

.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: -1;
}

.header {
	display: flex;
	flex-direction: column;
    text-align: center;
    margin-bottom: 80rpx;
    margin-top: 60rpx;
}

.logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 80rpx;
    margin-bottom: 30rpx;
    border: 4rpx solid rgba(255, 255, 255, 0.2);
}

.welcome {
    font-size: 44rpx;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.sub-welcome {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.login-form {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 30rpx;
    padding: 50rpx 40rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
    border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.form-item {
    position: relative;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16rpx;
    padding: 0 30rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
}

.form-item.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: #e0b080;
    box-shadow: 0 0 20rpx rgba(224, 176, 128, 0.1);
}

.form-item .icon {
    font-size: 36rpx;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 20rpx;
}

.form-item.active .icon {
    color: #e0b080;
}

.icon-btn {
    padding: 20rpx;
    color: rgba(255, 255, 255, 0.6);
}

input {
    flex: 1;
    height: 96rpx;
    font-size: 30rpx;
    color: #ffffff;
    background: transparent;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

input::placeholder {
    color: #ffffff;
    opacity: 0.9;
    font-weight: normal;
    font-size: 28rpx;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.error-tip {
    font-size: 24rpx;
    color: #ff6b6b;
    margin: -20rpx 0 20rpx 30rpx;
}

.login-btn {
    margin-top: 60rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #e0b080, #d4946f);
    border-radius: 44rpx;
    color: #1a1a1a;
    font-size: 30rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    border: none;
    position: relative;
    overflow: hidden;
}

.login-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.login-btn:active {
    transform: scale(0.98);
}

.login-btn:disabled {
    opacity: 0.6;
    transform: none;
}

.actions {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    padding: 0 20rpx;
}

.action-link {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.6);
    padding: 10rpx;
}

.action-link.highlight {
    color: #e0b080;
}
</style> 